<template>
    <!-- main开始   start -->
    <div class="main clearfix">
        <div class="w clearfix">
            <div class="big_main">
                <div class="main_center">
                    <Carousel :list="Get_banner" width='730'/>
                    <!-- <div class="swiper main_img" 
                        ref="swiper" 
                        @mouseenter="mySwiper.autoplay.stop()"
                        @mouseleave="mySwiper.autoplay.start()">
                        <div class="swiper-wrapper">
                            <div class="swiper-slide" v-for="banner in Get_banner" :key="banner.id">
                                <a href.prevent="">
                                    <img :src="banner.imgUrl" alt="" width="730px">
                                </a>    
                            </div>
                        </div>
                        如果需要分页器
                        <div class="swiper-pagination"></div>
                        
                        如果需要导航按钮
                        <div class="swiper-button-prev"></div>
                        <div class="swiper-button-next"></div>
                    </div> -->

                    <!-- <div class="main_img">
                            <div v-for="banner in Get_banner" :key="banner.id">
                                
                            </div>
                            <a href="">
                                <span class="main_span_left iconfont icon-zuojiantou"></span>
                            </a>
                            <a href="">
                                <span class="main_span_right iconfont icon-youjiantou1"></span>
                            </a>
                            <ul>
                                <li>
                                    <a href=""></a>
                                </li>
                                <li>
                                    <a href=""></a>
                                </li>
                                <li>
                                    <a href=""></a>
                                </li>
                                <li>
                                    <a href=""></a>
                                </li>
                            </ul>
                    </div> -->

                </div>
                <div class="main_right">
                    <div class="news">
                        <div class="news_top">
                            <h4>京东快报</h4>
                            <span>更多</span>
                            <i class="iconfont icon-xiangyoujiantou"></i>
                        </div>
                        <div class="news_bottom">
                            <ul>
                                <li>
                                    <b>[特惠]</b>
                                    <span>备战开学季 全民半价购数码</span>
                                </li>
                                <li>
                                    <b>[公告]</b>
                                    <span>备战开学季 全民半价购数码</span>
                                </li>
                                <li>
                                    <b>[特惠]</b>
                                    <span>备战开学季 全民半价购数码</span>
                                </li>
                                <li>
                                    <b>[公告]</b>
                                    <span>备战开学季 全民半价购数码</span>
                                </li>
                                <li>
                                    <b>[特惠]</b>
                                    <span>备战开学季 全民半价购数码</span>
                                </li>
                            </ul>
                        </div>
                    </div>
                    <div class="ico">
                        <ul>
                            <li>
                                <i class="iconfont icon-huafei"></i>
                                <span>话费</span>
                            </li>
                            <li>
                                <i class="iconfont icon-jipiao"></i>
                                <span>机票</span>
                            </li>
                            <li>
                                <i class="iconfont icon-dianyingpiao"></i>
                                <span>电影票</span>
                            </li>
                            <li>
                                <i class="iconfont icon-youxiyouxiji"></i>
                                <span>游戏</span>
                            </li>
                            <li>
                                <i class="iconfont icon-caipiao"></i>
                                <span>彩票</span>
                            </li>
                            <li>
                                <i class="iconfont icon-jiayouzhan"></i>
                                <span>加油站</span>
                            </li>
                            <li>
                                <i class="iconfont icon-jiudian"></i>
                                <span>酒店</span>
                            </li>
                            <li>
                                <i class="iconfont icon-huochepiao"></i>
                                <span>火车票</span>
                            </li>
                            <li>
                                <i class="iconfont icon-woyaozhongchou"></i>
                                <span>众筹</span>
                            </li>
                            <li>
                                <i class="iconfont icon-licai"></i>
                                <span>理财</span>
                            </li>
                            <li>
                                <i class="iconfont icon-lipinka"></i>
                                <span>礼品卡</span>
                            </li>
                            <li>
                                <i class="iconfont icon-baitiaoshanfu"></i>
                                <span>白条</span>
                            </li>
                        </ul>
                    </div>
                    <div class="mian_img">
                        <img src="./img/ad1.png" alt="">
                    </div>
                </div>
            </div>   
        </div>
    </div>
    <!-- main结束   end -->
</template>

<script>
import {mapState} from 'vuex'


export default {
    name:'Main',
    data() {
        return {
        }
    },
    mounted() {
        // 启动数据给banner的vuex  并且传入方法get_banner
        this.$store.dispatch('home/get_banner');        
    },
    computed:{
        // 获取banner vuex中state的Get_banner数据
        ...mapState('home',['Get_banner'])
    }
}
</script>

<style scoped lang='less'>
// main开始   start
.main{
    height: 100%;
    overflow: hidden;
    .big_main{
        display: flex;
        justify-content: flex-end;
        height: 454px;
        margin-top: 5px;
        .main_center{
            width: 730px;
             height: 100%;
             overflow: hidden;
        }
        .main_right{
            margin-left: 5px;
            width: 250px;
            height: 100%;
            // height: 454px;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            .news{
                border: 1px solid #e4e4e4;
                box-sizing: border-box;
                padding: 5px 5px 5px 10px;
                .news_top{
                    border-bottom: 1px solid #e4e4e4;
                    display: flex;
                    line-height: 22px;
                    justify-content: space-between;
                    padding-bottom: 5px;
                    position: relative;
                    h4{
                        font-size: 14px;
                        margin-left: 7px;
                    }
                    span{
                        font-size: 12px;
                        margin-right: 15px;
                        font-weight: 400;
                    }
                    i{
                        position: absolute;
                        top: 2px;
                        font-size: 13px;
                        right: 3px;
                    }
                }
                .news_bottom{
                    margin-left: 7px;
                    margin-top: 2px;
                    li{
                        line-height: 27px;
                    }
                }
            }
            .ico{
                margin-top: -15px;
                ul{
                    display: flex;
                    flex-wrap: wrap;
                    text-align: center;
                    border-right: 1px solid #e4e4e4;
                    li{
                        position: relative;
                        height: 64px;
                        cursor: pointer;
                        border-left: 1px solid #e4e4e4;
                        border-bottom: 1px solid #e4e4e4;
                        margin-right:-1px;
                        width: 25%;
                        i{
                            position: absolute;
                            top: 5px;
                            left: 50%;
                            transform: translateX(-50%);
                            font-size: 25px;
                        }
                        span{
                            display: block;
                            margin-top: 42px;
                        }
                    }
                }
            }
        }
    }
}
// main结束   end
</style>